import React, { useState } from "react";
import { NavBar, Space, Toast ,Collapse,Button,Popup,Input  } from "antd-mobile";
import dayjs from "dayjs";
import { Selector } from 'antd-mobile'
import { useNavigate, } from "react-router-dom";
function Index() {
    let nav=useNavigate()
   
    
    let [date]=useState(dayjs().format('MM-DD'))
    const [value, setValue] = useState('')
    const options = [
        {
          label: '有票方案',
          value: '1',
          description:'￥337',
          
        },
        {
          label: '二等座',
          value: '2',
          description:'￥672有票',
          
        },
        {
          label: '一等座',
          value: '3',
          description:'￥930有5张'
        },
        {
            label: '商务座',
            value: '4',
            description:'￥187仅有8张'
          },
      ]
      const [visible1, setVisible1] = useState(false)
  return (
    <div>
      <NavBar onBack={()=>nav(-1)}>
        <span>{date}  </span> 
      </NavBar>
      <div className="nm">
        <p>
          12:45 <br />
          北京大兴
        </p>
        <p onClick={()=>(setVisible1(true))}>
          5时59分 <br />
         G101时刻表
        </p>
        <p>
          12:45 <br />
          虹桥
        </p>
        <p>￥672</p>
      </div>
     
      <Selector
          options={options}
          defaultValue={['1']}
          onChange={(arr, extend) => console.log(arr, extend.items)}
        />
  
      <div>
      <Collapse accordion>
          <Collapse.Panel key='1' title='上车 --二等座----补四站--下车'>
          <div className="kk">
          <p style={{color:'orange'}}>￥323</p> <Button color='warning'>订</Button>
          
          </div >
          <p>出行无忧</p>
          <div  className="kk">
          <p style={{color:'orange'}}>￥672</p> <Button color='warning' onClick={()=>nav('/order')} >订</Button>
          </div>
          <p>登录12306积累12306积分</p>
          <div  className="kk">
          <p style={{color:'orange'}}>￥1333</p> <Button color='warning'>订</Button>
          </div>
          </Collapse.Panel>
          
        </Collapse>
        <div>
        <Popup
              visible={visible1}
              onMaskClick={() => {
                setVisible1(false)
              }}
              onClose={() => {
                setVisible1(false)
              }}
              bodyStyle={{ height: '40vh' }}
            >
              <p style={{fontSize:'20px'}}>
              <h3>G101时刻表</h3><br />
                车站名次  到达  出发  停留<br />
                北京南     --   06:45 2分钟 <br />
                北京南     --   06:45 2分钟<br />
                北京南     --   06:45 2分钟、<br />
                北京南     --   06:45 2分钟<br />
                北京南     --   06:45 2分钟<br />
                北京南     --   06:45 2分钟<br />
                北京南     --   06:45 2分钟<br />
                北京南     --   06:45 2分钟<br />
                北京南     --   06:45 2分钟<br />
                北京南     --   06:45 2分钟<br />
                北京南     --   06:45 2分钟<br />
                北京南     --   06:45 2分钟<br />
                北京南     --   06:45 2分钟<br />
                北京南     --   06:45 2分钟<br />
              </p>
            </Popup>
              <div>
              <Input
          placeholder='其他想说的'
          value={value}
          onChange={val => {
            setValue(val)
          }}
        />
        <p style={{fontSize:'20px'}}>不推荐吐槽<br />
          出票慢  客服卡  服务慢出票慢  客服卡  服务慢出票慢  客服卡  服务慢出票慢  客服卡  服务慢出票慢  客服卡  服务慢<br />
          出票慢  客服卡  服务慢出票慢  客服卡  服务慢出票慢  客服卡  服务慢出票慢  客服卡  服务慢出票慢  客服卡  服务慢<br />
          出票慢  客服卡  服务慢出票慢  客服卡  服务慢出票慢  客服卡  服务慢出票慢  客服卡  服务慢出票慢  客服卡  服务慢<br />
          出票慢  客服卡  服务慢出票慢  客服卡  服务慢出票慢  客服卡  服务慢出票慢  客服卡  服务慢出票慢  客服卡  服务慢<br />
        </p>
         <Button block color='success' size='large'>
          提交
        </Button>
              </div>
        </div>
      </div>
    </div>
    
  );
}

export default Index;
